<template>
  <div class="body-div">
    <div class="login">
      <h2>登录管理后台</h2>
      <div class="form">
        <div class="check_msg"></div>
        <div class="login_name">
          <input v-model="loginName" type="text"
                 class="form_input" placeholder="请输入用户名"/>
        </div>
        <div class="login_pwd">
          <el-form>
            <input v-model="loginPwd" type="password" class="form_input"
                   placeholder="请输入密码"/>
          </el-form>

        </div>
        <div class="login_help">
          <span><a href="#"> 忘记密码？</a></span>
        </div>
        <el-button  type="primary" class="btn_Login" @click="signIn()">
          登 录
        </el-button>

      </div>
    </div>
  </div>
</template>

<script>

    import {login} from "../assets/api/loginApi";

    export default {
        name:'Login',
        data(){
            return{
                loginName:'',
                loginPwd:'',
                manager:{}

            }
        },
        methods:{
            signIn() {
                let data = {}
                data.managerName = this.loginName
                data.managerPassword = this.loginPwd
                login(data,this.loginName).then((res) => {
                    if (res.code === 200) {
                        //如果登录成功，就存储token
                        localStorage.setItem('managerId',res.data.managerId)
                        localStorage.setItem('token', res.tokenValue)
                        localStorage.setItem('managerName', res.data.managerName)
                        this.$router.push('/home');
                       this.$layer.msg(res.message)
                    } else
                        this.$message.error(res.message);
                }).catch(error => {
                    console.log(error);
                })
            },
        }
    }
</script>

<style scoped>
  .body-div {
    margin: 0;
    padding: 0;
    font-family: "microsoft yahei", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    color: #333333;
    background: url('../assets/images/logobg.jpg');
    position: fixed;
    width: 100%;
    height: 100%;
  }

  * {
    margin: 0;
    padding: 0;
    outline: none;
    border: 0;

  }

  .login {
    width: 343px;
    height: 343px;
    margin: 180px auto 0;
    background: url('../assets/images/login_bg.png') no-repeat
  }

  .login h2 {
    color: #242424;
    font-size: 18px;
    font-weight: normal;
    padding: 32px 0 0 35px
  }

  .form {
    margin: 20px 0 0 40px
  }

  .check_msg {
    height: 18px;
    line-height: 18px;
    color: #e64141;
    width: 280px;
    margin: 6px 0 0 38px
  }

  .login_name {
    background: url('../assets/images/logo_name.jpg');
    width: 270px;
    height: 32px;
    text-indent: 2.5em;
    padding-top: 6px
  }

  input, button, select, textarea {
    outline: none;
    font-family: "微软雅黑";
    border: 0
  }

  .login_name input, .login_pwd input {
    width: 230px;
    line-height: 28px
  }

  .login_pwd {
    background: url('../assets/images/logo_psw.jpg');
    width: 270px;
    height: 32px;
    text-indent: 2.5em;
    padding-top: 6px;
    margin-top: 20px
  }

  .login_help {
    margin-top: 20px
  }

  .login_help a {
    color: #666;
    float: right;
    padding-right: 30px;
    text-decoration: none
  }

  .btn_Login {
    background: #28c09a;
    border-radius: 3px;
    width: 273px;
    height: 36px;
    margin: 20px 0 10px 0;
    color: #fff;
    font-size: 16px;
    line-height: 36px;
    cursor: pointer
  }
</style>

